<template>
<div class="content page-order" style="padding-bottom:2.5rem;overflow-x: hidden;">
    <div class="orderQueue">
        <div class="top_header">
            <img src="/static//app//images/arrow_left.png" onclick="history.go(-1)" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px"
            alt="">
            <h2 style="text-align: center">登录</h2>
        </div>
        <div class="container">
            <div class="login-form-box">
                <form class="login-form" action="" method="post">
                    <div class="form_username">
                        <p>手机号/邮箱 ：</p>
                        <input v-model="username" type="text">
                    </div>
                    <div class="form_password">
                        <p>密码 ：</p>
                        <input  v-model="passwd" type="password">
                    </div>
                    <div class="form_btn">
                        <input type="button" v-on:click="submit_button()" value="登录"/>
                        <p><a href="#" v-on:click="forget()" >忘记密码</a></p>
                        <p>还没有账号？<a href="/users/register/?next=/m#/login/">注册</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</template>

<script>


export default {
    name: 'login',
    data () {
        return {
            passwd : '',
            username : ''
        }
    },

    methods:{
        submit_button: function () {
            //询问框
            //console.log("submit_buy" )
            var username = this.username
            var passwd = this.passwd
            var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
            if (this.username == "" || this.passwd == "")
            {
                layer.open({ type:0, content: '请输入用户名和密码', skin: 'msg',
                    time: 1 ,//2秒后自动关闭
                    style: style,
                });
                return
            }

            $.post("/m/api/login", {
                passwd : this.passwd,
                username : this.username,
            }, (data) => {

                var error_msg = {
                    "passwd_invalid" : "密码错误",
                    "no_active" : "账号未激活",
                    "msm_invalid" : "短信验证码不正确",
                }

                console.log(data);
                if (data.result == false) {
                    var msg = data.msg
                    if (error_msg[msg])
                    {
                        msg = error_msg[msg]
                    }
                    //console.log(msg);
                    content = '重登陆失败,'+ msg
                    layer.open({
                        type:0,
                        content: content,
                        skin: 'msg',
                        time: 2 ,//2秒后自动关闭
                        style: style,
                    });
                    return
                }

                var content = '登录成功'
                layer.open({
                    type:0,
                    content: content,
                    skin: 'msg',
                    time: 3 ,//2秒后自动关闭
                    style: style,
                });
               g_store.commit('changeLogin',1)
               router.push( { path:"/market/" }
                )
        })
    },
    forget:function() {
        var content = '请到pc网站操作'
        var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
        layer.open({
            type:0,
            content: content,
            skin: 'msg',
            time: 3 ,//2秒后自动关闭
            style: style,
        });
    }
}
}
</script>

<style scoped>
.container .login-form-box form{
    width: 20rem;
    height: 20rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    text-align: center;
    }
    .form_username input, .form_password input{
        width: 80%;
        height: 1.8rem;
        background-color: #141414;
        border: 1px solid #444444;
    }
    .form_username p, .form_password p{
        text-align: left;
        margin-left: 10%;
    }
    .form_btn{
        margin-top: 2rem;
    }
    .form_btn input{
        width: 80%;
        height: 2.4rem;
        background-color: #141414;
        border: 1px solid #ff9500;
    }
    .form_btn a{
        color: #ff9500;
    }
</style>
